*{
    margin: 0;
    padding: 0;

}
body{
    --weui-FG-3:rgba(0,0,0,0.1);
    --weui-BRAND:#07c160;
    --weui-BG-3:#f7f7f7;
}
.weui-switch{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* -webkit chrom 浏览器内核 */
    -webkit-appearance: none;
    /*  浏览器对form表单元素样子重置的样式 */
    appearance: none;
    position: relative;
    width: 52px;
    height: 32px;
    /* css4 css varibal */
    border: 2px solid var(--weui-FG-3);
    outline: 0;
    padding: 5px;
    border-radius: 16px;
    /* 设置的宽高为整个盒子大小 */ 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transition: background-color 0.1s,border 0.1s;
    -webkit-transition: background-color 0.1s,border 0.1s;
}
.weui-switch:checked{
    background-color: var(--weui-BRAND);
    border-color: var(--weui-BRAND);
}
.weui-switch::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 15px;
    background-color: var(--weui-BG-3);
    transition: transform 0.35s cubic-bezier(0.45,1,0.4,1),-webkit-transform 0.35s cubic-bezier(0.45,1,0.4,1);

}
.weui-switch::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transition: transform 0.35s cubic-bezier(0.4,0.4,0.25,1.35),-webkit-transform 0.35s cubic-bezier(0.4,0.4,0.25,1.35);
}
.weui-switch:checked::before{
    transform: scale(0);
}
.weui-switch:checked::after{
    transform: translateX(20px);
}